import React, { useEffect, useState } from 'react';
import styles from './index.module.scss'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd';
import HeaderBig from './HeaderBig';
import RightContent from './RightContent';
import logo from 'assets/logo.svg'
import { listUserWebsite } from 'api/website';

const { Header, Sider, Content } = Layout;

const Website = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [sites, setSites] = useState([])

  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  useEffect(() => {
    // 获取用户网站列表
    async function getUserWebsites({name, url}) {
      const res = await listUserWebsite({
        name,
        url
      })
     if(res.code === 200) {
      setSites(res.data)
     }
    }
    getUserWebsites({
      name: '',
      url: ''
    })
    
  }, [])
  return (
   <div className={styles.website}>
     <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={sites.map(category => {
            const {websiteCategoryId: key, websiteCategoryName: label, imgUrl} = category
            return ({
              key,
              label,
              icon: <img src={imgUrl} alt="" />
            })
          })
           /*  [
            {
              key: '1',
              icon: <UserOutlined />,
              label: '热门工具',
            },
            {
              key: '2',
              icon: <VideoCameraOutlined />,
              label: '实用工具',
            },
            {
              key: '3',
              icon: <UploadOutlined />,
              label: '影音专区',
            },
          ] */}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}
        >
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <HeaderBig></HeaderBig>
          <RightContent sites={sites}></RightContent>
          <div className="main-footer">
            <div className="footer-inner card">
             <div className="card-body">
             <div className="footer-info">
                <div className="footer-logo">
                  <img src={logo} alt="" />
                </div>
              </div>
              <div className="footer-copyright">
              Copyright © 2022 TBOX  版权所有 ICP证： 豫ICP备2024049736号-2|网站地图| 本站运行: 919天13小时18分59秒  
              </div>
             </div>
            </div>
          </div>
        </Content>
      </Layout>
    </Layout>
   </div>
  );
};
export default Website;